import React from 'react'
import { useRef } from 'react'
import { useState } from 'react'
import "./App.css"
import Main from './components/Main'
// 导入配置号的axios对象
import request from './request'
export default function App() {
    let [users, setUsers] = useState([])
    let [loading, setLoading] = useState(false)
    
    let [first, setFirst] = useState(true) // 首屏数据渲染标识

    const keywordRef = useRef()
    async function searchHandler(){
        setFirst(false)
        setLoading(true)
        let keyword = keywordRef.current.value.trim()
        let {items} = await request.get('/search/users',{
            params:{
                q:keyword
            }
        })
        setUsers(items)
        setLoading(false)
    }

    
    
    return (
        <div className="container">
            <section className="jumbotron">
                <h3 className="jumbotron-heading">Search Github Users</h3>
                <div>
                    <input ref={keywordRef} type="text" placeholder="enter the name you search" />
                    <button onClick={searchHandler}>Search</button>
                </div>
            </section>
            {first && <div className="row"><h3>请输入用户名搜索</h3></div>}
            {loading ? <div className='row'>loading.....</div> : <Main users={users}/>}
        </div>
    )
}
